<template>
    <div class="family-check-in">
        <div class="banner-content">
            <img src="../assets/banner.jpg">
        </div>
        <div class="check-in-form">
            <group>
                <x-input title="嗨够ID " :readonly="true" label-width="5em" v-model:value=haigouform.user_id
                         :required=true @on-blur="isOk"></x-input>
            </group>
            <group>
                  <x-input title="家族名称" :max="12" label-width="5em" v-model:value=haigouform.family_name class="family-name"
                         placeholder="请填家族名称（必填,限字12)" :required=true></x-input>
            </group>
            <group>
                <x-input title="手机号码" :max="11" is_type="china-mobile" label-width="5em" placeholder="请填写您的手机号码（必填)"
                         v-model:value=haigouform.family_phone :required=true></x-input>
            </group>
            <group>
                <x-input title="微信号码" :max="20" label-width="5em" placeholder="请填写微信号（必填,限字20)"
                         v-model:value=haigouform.wechat_name :required=true></x-input>
            </group>
            <group>
                <x-input title="合作平台" :max="20" label-width="5em" placeholder="合作的过的直播平台（选填,限字20)"
                         v-model:value=haigouform.cooperation_name></x-input>
            </group>
            <group>
                <x-input title="家族规模" :max="5" label-width="5em" placeholder="预计家族主播人数（选填,限定字数5)"
                         v-model:value=haigouform.family_num></x-input>
            </group>
        </div>
        <div class="btn-submit" @click=confirm>
            <img src="../assets/submit.png">
        </div>
    </div>


</template>

<script>
    import {XInput, Group, XButton, Cell} from "vux";

    export default {
        name: "Family",
        components: {
            XInput,
            XButton,
            Group,
            Cell
        },
        data() {
            return {
                haigouform: {
                    user_id: "",
                    family_name: "",
                    family_phone: "",
                    wechat_name: "",
                    cooperation_name: "",
                    family_num: 0
                },
                url: "family/familyadd",
                signKey: "5uwlz83ko9iu76k08h623",
                is_userAgent: 'pc',
                msgBool: {
                    msg: '',
                    bool: true
                }
            };
        },
        mounted() {
            this.init();
        },
        methods: {
            /**
             * 初始化函数
             */
            init() {


                let haigou_id = "";
                this.is_userAgent = this.getUserAgent();

                if (this.$route.params.haigou_id != undefined) {
                    haigou_id = this.$route.params.haigou_id;
                }
                this.haigouform.user_id = haigou_id;
            },
            getUserAgent() {
                if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                    return 'iphone';
                } else if (/(Android)/i.test(navigator.userAgent)) {
                    return 'Android';
                } else {
                    return 'pc'
                }
                ;
            },

            confirm() {

                if (this.isOk()) {
                    // 显示
                    const _this = this; // 需要注意 onCancel 和 onConfirm 的 this 指向
                    this.$vux.confirm.show({
                        // 组件除show外的属性
                        content: "确定您申请入驻信息正确并提交?",
                        onConfirm() {
                            _this.submitFamily();
                        }
                    });
                } else {
                    // 显示
                    this.$vux.toast.show({
                        text: this.msgBool.msg
                    });
                }

            },
            isPoneAvailable(str) {
                var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
                if (!myreg.test(str)) {
                    return false;
                } else {
                    return true;
                }
            },

            /**
             * 检测input 输入框值
             * @returns {boolean}
             */
            isOk() {

                if (!this.haigouform.user_id) {
                    this.msgBool.msg = '请填写正确的海够id'
                    return false;

                } else if (!this.haigouform.family_name) {
                    this.msgBool.msg = '家族名称不存在或不正确'
                    return false;

                }  else if(!this.isPoneAvailable(this.haigouform.family_phone)){
                    this.msgBool.msg = '手机号码不存在或格式不正确'
                    return false;
                }else if (!this.haigouform.wechat_name) {
                    this.msgBool.msg = '微信名称不存在或不正确'
                    return false;

                } else if (!this.isNumber(this.haigouform.family_num)) {
                    this.msgBool.msg = '预计家族主播人数,请填写数字类型';
                    return false;

                }

                this.msgBool.msg = '';
                return true;

            },

            /**
             * 验证是否是数字
             * @param val
             * @returns {boolean}
             */
            isNumber(val) {

                var regNeg = /^[0-9]+$/;
                if (regNeg.test(val)) {
                    return true;
                } else {
                  console.log("pc端");
                }
            },

            submitFamily() {
                let url = this.url;
                this.haigouform.time = this.timest();
                let sign = this.getSgin(this.haigouform);
                let sign_obj = {sign: sign};
                let new_data = Object.assign(sign_obj, this.haigouform);
                this.$axios
                    .post(url, new_data)
                    .then(res => {
                        if (res.data.code == 0) {
                            // 显示
                            var _this = this;
                            var _window = window;
                            this.$vux.alert.show({
                                content: "您已成功提交家族入驻申请，运营人员将很快和您联系~",
                                buttonText: "我知道了",
                                onHide() {
                                    if (_this.is_userAgent == 'Android') {
                                        _window.App.closeFamily();

                                    } else if (_this.is_userAgent == 'iphone') {
                                        _window.webkit.messageHandlers.closeFamily.postMessage(null)

                                    } else {
                                        console.log('pc端');
                                    }

                                }
                            });
                        } else {
                            let message = res.data.message;
                            if(res.data.code == 1003){
                                message = '非法请求!';
                            }
                            // 显示
                            this.$vux.toast.show({
                                text:message
                            });

                        }
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },

            /**
             * sign 排序
             * @param obj
             * @returns {*}
             */
            getSgin(obj) {
                //排序的函数
                var newkey = Object.keys(obj).sort();
                //先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获取的属性名进行排序，newkey是一个数组
                let sign = "";
                var newObj = {}; //创建一个新的对象，用于存放排好序的键值对
                for (var i = 0; i < newkey.length; i++) {
                    //遍历newkey数组
                    sign += newkey[i] + "=" + obj[newkey[i]] + "&";
                    newObj[newkey[i]] = obj[newkey[i]]; //向新创建的对象中按照排好的顺序依次增加键值对
                }
                sign = sign + "key=" + this.signKey;

                return this.$md5(sign); //返回排好序的新对象
            },
            timest() {
                var tmp = Date.parse(new Date()).toString();
                tmp = tmp.substr(0, 10);
                return tmp;
            }
        }
    };
</script>

<style lang="less">
.family-check-in {
  display: flex;
  flex-direction: column;
  .banner-content {
    img {
      width: 375px;
      height: 126px;
    }
  }
  .check-in-form {
    padding: 0 5px;
    .family-name {
      input::-webkit-input-placeholder {
        font-size: 12px;
        color: #ff0000;
      }
    }
    .weui-label {
      font-size: 14px;
    }
  }
  .btn-submit {
    align-self: center;
    margin-top: 40px;
    img {
      height: 44px;
    }
  }
  .vux-x-icon {
    fill: #989898;
  }
  .weui-cell {
    input::-webkit-input-placeholder {
      font-size: 12px;
      color: #989898;
    }
  }
  .weui-cells:before {
    border-top: none !important;
  }
}
</style>
